<script setup>
import { ref } from 'vue';
import { useSettingStore } from '../../store/setting';
import { useDepartmentStore } from '../../store/department';
import department from '../../api/department';
import { useAddDepartmentStore } from '../../store/addDepartment';
import addDepartment from './addDepartment.vue';
const addDepartmentStore = useAddDepartmentStore();
const settingStore = useSettingStore();
const departmentStore = useDepartmentStore();
const departmentName = ref('');
const departmentStatus = ref('');
async function serachDepartment() {
    const name = departmentName.value.trim();
    const status = departmentStatus.value;
    if (name !== '' | status !== '') {
        await department.getSpecieDepartmentList(
            name || null,  // 空字符串转为 null
            status || null  // 空字符串转为 null
        ).then(res => {
            departmentStore.setDepartmentTable(res.data.data)
        }).catch(err => {
            console.log(err)
        }).finally(() => {
            departmentStore.changeLoading()
        })
    }
    else {
        console.log('请输入搜索条件')
        await department.getAllDepartmentList().then(res => {
            departmentStore.setDepartmentTable(res.data.data)
        }).catch(err => {
            console.log(err)
        }).finally(() => {
            departmentStore.changeLoading()
        })
    }
}
function resetSearch() {
    departmentName.value = '';
    departmentStatus.value = '';
    serachDepartment(); // 重置后自动刷新为全量数据
}
</script>
<template>
    <div class="department-header">
        <span>
            部门名称：<el-input v-model="departmentName" placeholder="请输入部门名称" style="width: 240px;" />
        </span>
        <span>
            状态：<el-select v-model="departmentStatus" placeholder="请选择状态" clearable style="width: 240px;">
                <el-option label="正常" value=1></el-option>
                <el-option label="停用" value=0></el-option>
            </el-select>
        </span>
        <div class="button-group">
            <span>
                <el-button type="primary" @click="serachDepartment" size="small">搜索</el-button>
            </span>
            <span>
                <el-button type="info" @click="resetSearch" size="small">重置</el-button>
            </span>
        </div>
    </div>
    <div class="department-button">
        <el-button type="success" @click="addDepartmentStore.setIsOpen(true)"><el-icon>
                <Plus />
            </el-icon>新增</el-button>
        <el-button type="primary" @click="settingStore.toggleAllExpansion()"><el-icon>
                <Switch />
            </el-icon>展开/折叠</el-button>
    </div>
    <addDepartment />
</template>
<style scoped>
.department-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.department-button {
    margin-top: 1rem;
}
.button-group {
    display: flex;
    gap: 0.5rem;
}

@media screen and (max-width: 768px) {
    .department-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .department-header span {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .department-header :deep(.el-input),
    .department-header :deep(.el-select) {
        width: 100% !important;
    }

    .button-group {
        display: flex;
        margin-top: 0.5rem;
    }

    .button-group :deep(button) {
        width: 100%;
    }

    .department-button {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .department-button :deep(button) {
        flex: 1;
        padding: 8px;
    }

    .department-button :deep(.el-icon) {
        margin-right: 4px;
    }
}
</style>